<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>票房预测</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
	<style>
		* {
			padding: 0px;
			margin: 0px;
		}

		img {
			border: none
		}

		body {
			max-width: 480px;
			margin: 0 auto;
			background: #46485b;
			font-family: "微软雅黑"


		}

		.con {
			background: url(./bg.png) no-repeat;
			background-size: 100%;
			overflow: hidden;
		}

		h1 {
			text-align: center;
			margin-top: 90px;
			color: #f19e42
		}

		dl {
			width: 90%;
			height: 44px;
			line-height: 44px;
			margin-left: 5%;
			margin-top: 20px;
		}

		dl dd {
			float: left;
			color: #fff;
		}

		dl dt {
			float: right;
		}

		select {
			border: 1px solid #999;
			width: 100px;
			height: 42px;
			background: #fff;
		}

		.btn {
			width: 90%;
			margin: 0 auto;
			height: 44px;
			line-height: 44px;
			background: #f19e42;
			margin-top: 24px;
			text-align: center;
			border-radius: 5px;
		}

		.btn button {
			width: 100%;
			font-size: 17px;
			color: #fff;
			background: transparent;
			border: none
		}

		/* 弹框样式 */
		#tk {
			width: 80%;
			height: 200px;
			background: #fff;
			position: fixed;
			left: 50%;
			margin-left: -40%;
			top: 40%;
			border-radius: 5px;
			border: 1px solid #ddd;
			text-align: center;
			display: none

		}

		#tk p {
			font-size: 20px;
			line-height: 100px;
		}
		#tk p span{
			color:#f19e42;
			font-size: 28px;
		}

		#tk button {
			width: 100px;
			font-size: 17px;
			height: 44px;
			line-height: 44px;
            background: transparent;
			border: 1px solid #ddd;
			border-radius: 5px;
		}
	</style>


</head>

<body>
	<div class="con">


		<h1>电影票房预测</h1>
		<div class="info">
			<dl>
				<dd>1.请选择该电影评分</dd>
				<dt><select name="" id="score">
						<option value="0">请选择</option>
						<!-- 10亿 -->
						<option value="1000000000">10分</option>
						<!-- 7亿   -->
						<option value="700000000">9分</option>
						<!-- 5亿 -->
						<option value="500000000">8分</option>
						<!-- 500万 -->
						<option value="5000000">7分以下</option>
					</select></dt>

			</dl>
			<dl>
				<dd>2.请选择该电影时长</dd>
				<dt><select name="" id="times">
						<option value="0">请选择</option>

						<!-- 1亿 -->
						<option value="100000000">1-2小时</option>
						<!-- 5000万 -->
						<option value="50000000">2小时以上</option>
						<!-- 100万 -->
						<option value="10000000">1小时以下</option>
					</select></dt>

			</dl>
			<dl>
				<dd>3.该电影是否改编</dd>
				<dt><select name="" id="adapt">
						<option value="0">请选择</option>

						<!-- 500万 -->
						<option value="50000000">否</option>
						<!-- 1000万 -->
						<option value="100000000">小说</option>
						<!-- 1000万 -->
						<option value="10000000">漫画</option>
					</select></dt>

			</dl>
			<dl>
				<dd>4.该电影上映档期</dd>
				<dt><select name="" id="cycle">
						<option value="0">请选择</option>

						<!-- 10亿 -->
						<option value="1000000000">贺岁</option>
						<!-- 5亿 -->
						<option value="500000000">暑期</option>
						<!-- 5亿 -->
						<option value="500000000">五一</option>
						<!-- 5亿 -->
						<option value="500000000">国庆</option>
						<!-- 100万 -->
						<option value="1000000">平时</option>

					</select></dt>

			</dl>
			<dl>
				<dd>5.请选择该电影类型</dd>
				<dt><select name="" id="type">
						<option value="0">请选择</option>

						<!-- 1亿 -->
						<option value="100000000">喜剧</option>
						<!-- 1000万 -->

						<option value="10000000">惊悚</option>
						<!-- 1000万 -->

						<option value="10000000">剧情</option>
						<!-- 1000万 -->

						<option value="10000000">科幻</option>
						<!-- 200万 -->
						<option value="2000000">其他</option>
					</select></dt>

			</dl>
			<dl>
				<dd>6.请选择该电影上映周数</dd>
				<dt><select name="" id="week">
						<option value="0">请选择</option>

						<!-- 1亿 -->
						<option value="1000000000">5周以上</option>
						<!-- 300万 -->
						<option value="3000000">5周以下</option>
					</select></dt>

			</dl>
			<dl>
				<dd>7.上映首周平均日票房</dd>
				<dt><select name="" id="day">
						<option value="0">请选择</option>

						<!-- 1亿 -->
						<option value="100000000">500万</option>
						<!-- 3000万 -->
						<option value="30000000">300万-500万</option>
						<!-- 100万 -->
						<option value="1000000">100万以下</option>

					</select></dt>

			</dl>
			<dl>
				<dd>8.上映首周场均观影人次</dd>
				<dt><select name="" id="pepolenum">
						<option value="0">请选择</option>

						<!-- 1亿 -->
						<option value="1000000000">50人以上</option>
						<!-- 100万 -->
						<option value="1000000">50以下</option>

					</select></dt>

			</dl>
		</div>
		<div class="btn" id="btn">
			<button>预测</button>
		</div>

		<div id="tk">
			<p>该电影票房预测 <span id="allresult">31y</span></p>
			<button id="close">关闭</button>
		</div>
	</div>
</body>
<script>
	var score = document.getElementById("score");
	var times = document.getElementById("times");
	var adapt = document.getElementById("adapt");
	var cycle = document.getElementById("cycle");
	var type = document.getElementById("type");
	var week = document.getElementById("week");
	var day = document.getElementById("day");
	var pepolenum = document.getElementById("pepolenum");
	var close = document.getElementById("close");
	var tk = document.getElementById("tk");
	var
		result = 0,
		result1 = 0,
		result2 = 0,
		result3 = 0,
		result4 = 0,
		result5 = 0,
		result6 = 0,
		result7 = 0,
		result8 = 0
	score.onchange = function () {
		result1 = this.options[this.selectedIndex].value;
	}
	times.onchange = function () {
		result2 = this.options[this.selectedIndex].value;
	}
	adapt.onchange = function () {
		result3 = this.options[this.selectedIndex].value;
	}
	cycle.onchange = function () {
		result4 = this.options[this.selectedIndex].value;
	}
	type.onchange = function () {
		result5 = this.options[this.selectedIndex].value;
	}
	week.onchange = function () {
		result6 = this.options[this.selectedIndex].value;
	}
	day.onchange = function () {
		result7 = this.options[this.selectedIndex].value;
	}
	pepolenum.onchange = function () {
		result8 = this.options[this.selectedIndex].value;
	}


	btn.onclick = function () {
		var result = Number(result1) + Number(result2) + Number(result3) + Number(result4) + Number(result5) + Number(result6) + Number(result7) + Number(result8)
		// console.log(result)
		
		document.getElementById("allresult").innerHTML=tranNumber(result);
        tk.style.display="block"


	}

	close.onclick=function(){
        tk.style.display="none"
	}



	//   数字转化成亿跟万的单位

	function tranNumber(num, point) {
		let numStr = num.toString()
		// 十万以内直接返回 
		if (numStr.length < 6) {
			return numStr;
		}
		//大于8位数是亿
		else if (numStr.length > 8) {
			let decimal = numStr.substring(numStr.length - 8, numStr.length - 8 + point);
			return parseFloat(parseInt(num / 100000000) + '.' + decimal) + '亿';
		}
		//大于6位数是十万 (以10W分割 10W以下全部显示)
		else if (numStr.length > 5) {
			let decimal = numStr.substring(numStr.length - 4, numStr.length - 4 + point)
			return parseFloat(parseInt(num / 10000) + '.' + decimal) + '万';
		}
	}
</script>

</html>